﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        :close-on-click-modal="false"
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >

            <el-row>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="申请编号：">
                        {{entityObj.afterOrderCode}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="申请单位：">
                        {{entityObj.storeName}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="申请人：">
                        {{entityObj.createName}}
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label-width="120px" label="申请时间：">
                        {{entityObj.createTime}}
                    </el-form-item>
                </el-col>
            </el-row>
          
            <el-row>
                <el-col :span="12">
                    <el-form-item label-width="120px" label="退换货清单" prop="afterOrderItems">
                        <el-button type="primary" size="small" @click="addMaterial()" >添加物料</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="">
                        <el-table :data="entityObj.afterOrderItems" border style="width: 100%" show-summary :summary-method="getSummaries">
                          
                            <el-table-column label="物料编码" width="100">
                                    <template #default="scope">{{scope.row.materialCode}}</template>
                            </el-table-column>
                           
                            <el-table-column label="物料名称" width="180">
                                <template #default="scope">
                                    <div style="color: #318cf2; cursor: pointer;" @click="handlePreview(scope.row)">
                                            {{scope.row.materialName}}
                                        </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="分类" width="100">
                                <template #default="scope">{{scope.row.materialTypeName}}</template>
                            </el-table-column>
                            <el-table-column label="单位" width="70">
                                <template #default="scope">{{scope.row.newUnitName}}</template>
                            </el-table-column>
                            <el-table-column label="单价" width="70">
                                <template #default="scope">{{scope.row.price}}</template>
                            </el-table-column>
                            <el-table-column label="应退门店" width="100" prop="returnAmount">
                                <template #default="scope">
                                    <span v-if="scope.row.afterOrderType==0">--</span>
                                    <span v-if="scope.row.afterOrderType==1">{{scope.row.confirmQty * scope.row.price}}</span>
                                </template>
                            </el-table-column>
                           
                            <el-table-column label="破损处理" width="130" prop="afterOrderType">
                                <template #default="scope">
                                    <el-select placeholder="处理方式" v-model="scope.row.afterOrderType" style="width: 100px">
                                        <el-option label="补发" :value="0"/>
                                        <el-option label="退货" :value="1"/>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="申请数量" width="130" prop="qty">
                                <template #default="scope">
                                    <el-input-number
                                        v-model="scope.row.qty"
                                        style="width: 100%"
                                        :step="1"
                                        :max="scope.row.taskQty"
                                        :min="1"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="集采接单数量" width="120" prop="confirmQty">
                                <template #default="scope">
                                    {{scope.row.confirmQty}}
                                </template>
                            </el-table-column>
                          
                            <el-table-column label="规格" width="120">
                                <template #default="scope">{{scope.row.materialSpecs}}</template>
                            </el-table-column>
                            <el-table-column label="要货单号" width="200">
                                <template #default="scope">{{scope.row.applyOrderCode}}</template>
                            </el-table-column>
                            <el-table-column label="供应商" width="200">
                                <template #default="scope">{{scope.row.supplierFullName}}</template>
                            </el-table-column>
                            
                            <el-table-column label="破损照片" width="150" >
                                <template #default="scope">
                                        <sc-upload-multiple 
                                            v-model="scope.row.images"
                                            :objName="'Supply/AfterOrder'" 
                                            :uploadType="'OSS'" 
                                            :bucketName="'jtmc'" 
                                            :limit="1"
                                           
                                             />
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" width="150" >
                                <template #default="scope">
                                    <el-input v-model="scope.row.remarks" style="width: 100%" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button
                                        type="danger"
                                        size="small"
                                        @click="deleteRow(scope.$index, scope.row)"
                                    >移除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                    
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="门店备注">
                        <el-input v-model="entityObj.remarks" type="textarea" :rows="2" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="审核备注">
                        <el-input v-model="entityObj.auditRemarks" type="textarea" :rows="1" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
            <el-col :span="24">
                <el-form-item label-width="120px" label="退回仓库：">
                    <el-radio-group v-model="this.entityObj.isBack">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="this.entityObj.isBack==1">
            <el-col :span="24">
                <el-form-item label-width="120px" label="选择仓库：">
                    <el-select placeholder="---请选择仓库---" v-model="this.entityObj.warehouseId" style="width:300px">
                        <el-option
                            v-for="item in this.entityObj.purchaseUnityWarehouses"
                            :key="item.warehouseId"
                            :label="item.warehouseName"
                            :value="item.warehouseId"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
        </template>
        <template>
            <el-dialog
                v-model="materialVisible"
                title="选择收货订单物料"
                :width="1300"
                :center="true"
                append-to-body
                style="height: 480px"
            >
                <el-row>
                    <sc-task-order-item-choice
                        ref="scTaskOrderItemChoice"
                        :storeId="this.entityObj.storeId"
                    ></sc-task-order-item-choice>
                </el-row>
                <template #footer>
                    <el-button @click="materialVisible = false">取 消</el-button>
                    <el-button type="primary" :loading="isSaveing" @click="setTaskOrderItemChoice">确定</el-button>
                </template>
            </el-dialog>
        </template>

        <!-- 预览组件 -->
        <el-image-viewer v-if="showImage" @close="closeViewer" :url-list="srcList" />


    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            mode: "Add",
            titleMap: {
                Add: "补发/退货申请",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {
                remarks:"",
                afterOrderItems:[],
                purchaseUnityWarehouses:[],
                isBack:0,
                warehouseId:0
            },
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            //验证规则
            rules: {
                afterOrderItems: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                        trigger: "change",
                    },
                    
                ],
                afterOrderType: [
                    { required: true, type: "number", message: "请填写破损类型" },
                ],
                qty: [
                    { required: true, type: "number", message: "请填写申请数量" },
                ],
            },
            //选择物料页面
            materialVisible: false,
             //预览图片
             previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            
            
          
        };
    },
   
    watch: {
            // 'entityObj.afterOrderItems':{
            //     handler(newvalue, oldVal) {
            //         let returnFee = 0;
            //         if(newvalue)
            //         {
            //             newvalue.map((p) => {
            //                 returnFee += p.afterOrderType==1?p.price * p.qty:0;
            //             });
            //             this.entityObj.totalReturnFee=returnFee;
            //         }
            //     },
            //     deep: true
            // }
	},
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        addMaterial() {
            this.materialVisible = true;
        },
        setTaskOrderItemChoice() {
            console.log(this.$refs.scTaskOrderItemChoice.selectionRows);
            this.entityObj.afterOrderItems.push(...this.$refs.scTaskOrderItemChoice.selectionRows);
            this.materialVisible = false;
        },
        deleteRow(index) {
            this.entityObj.afterOrderItems.splice(index, 1);
        },
        getSummaries(param){
            const{ columns,data}=param;
            const sums=[];
            columns.forEach((column,index)=>{
                if (index === 0) {
                    sums[index] = '合计'
                    return;
                }
              
                const values=data.map(item=>Number(item[column.property]));
                if(column.property=='qty'|| column.property=='confirmQty'){
                    if(!values.every(item=>isNaN(item))){
                        const total = values.reduce((a, b) => a + b, 0)
                        sums[index] = total
                    }
                }else if(column.property=='returnAmount')
                {
                    var totalAmount=0;
                    this.entityObj.afterOrderItems.forEach((item) => {
                        totalAmount+=item.price * item.qty
                    });
                    sums[index]=totalAmount
                    
                }
            });
            return sums;
        },
       
        //表单注入数据
        async setData(data) {
            console.log("data",data);
            this.entityObj.remarks = data.remarks;
            this.entityObj.auditRemarks = data.auditRemarks;
            this.entityObj.afterOrderCode= data.afterOrderCode;
            this.entityObj.createName = data.createName;
            this.entityObj.storeId = data.storeId;
            this.entityObj.storeName = data.storeName;
            this.entityObj.createTime = data.createTime;
            this.entityObj.isBack = data.isBack;
            this.entityObj.warehouseId = data.warehouseId;
            this.entityObj.purchaseUnityWarehouses=data.purchaseUnityWarehouses;

            if (data.afterOrderId) {
                try {
                    var returnValue = await this.$API.auth.GetProcessApi.get(
                        `after-order/${data.afterOrderId}`,
                        { }
                    );
                    if (returnValue.status == 200) {
                        this.entityObj.afterOrderItems =returnValue.response;
                        console.log("明细",this.entityObj.afterOrderItems);
                    } else {
                        this.$message.error("操作失败:" + returnValue.msg);
                    }
                } catch (error) {
                    this.loading = false;
                    return false;
                }
            }
            
        },
         //图片预览
         handlePreview(row) {
            if (!row.materialImages || row.materialImages.length == 0) {
                return;
            }
            this.previewUrl = row.materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = row.materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image

        },
        closeViewer(){
            this.showImage = false; 
        },
        async initOptions() {
           

           
        },
    },
    async mounted() {
        await this.initOptions();
    },
};
</script>
<style scoped>

/deep/ .el-upload--picture-card{
    width: 50px;
    height: 50px;
}
/deep/ .el-upload{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 50px;
    height: 50px;
    line-height: 50px;
}
</style>
